<template>
    <div>
        <h1 style="text-align:center">评论</h1>
        {{user.userName}}
        <el-button style="margin-left:1300px" @click="handleLogout">退出</el-button>
        <el-table :data="reviewList.data"  style="margin-left:650px;width: 100%">
            <el-table-column flexed prop="reviewName" label="用户名" width="150"></el-table-column>
            <el-table-column flexed prop="reviewContent" label="评论" width="350"></el-table-column>
            <el-table-column flexed label="点赞" width="50">
                <template flexed slot-scope="scope">
                    <img v-if="show(scope.row)" @click="upOrDown(scope.row,imgUrl)" :src="'../assets/'+this.imgUrl" style="width: 30px;height: 30px">
                </template>
            </el-table-column>
            <el-table-column flexed prop="reviewScore" width="100"></el-table-column>
        </el-table><br>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
import {getUser,refreshToken,UP,DOWN} from "../service/review"
export default {
    data(){
        return{
            imgUrl:"zan.png",
            user:{},
        }
    },
    computed:{
        ...mapState("review",["reviewList","param",'token']),
    },
    methods:{
        ...mapActions("review",["selectAll"]),
        ...mapMutations("review",["setParam"]),
        async handleLogout(){
            this.$cookies.remove('token');
            this.$router.push("/reviewLogin");
        },
        show(row){
            for(let i = 0; i<this.user.size;i++){
                if(row.reviewId == this.user.reviewBeans[i].reviewId){
                    this.imgUrl = "zan_active.png"
                }
            }
        },
        async upOrDown(row,imgUrl){
            if(imgUrl == "zan.png"){
                let response = await UP(row.reviewId,this.user.userId);
                if(response == "ok"){
                    this.selectAll();
                }
            }else if(imgUrl == "zan_active.png"){
                let response = await DOWN(row.reviewId,this.user.userId);
                if(response == "ok"){
                    this.selectAll();
                }
            }
        },
    },
    async created(){
        console.log("access_token",this.token.token);
        // console.log('token',this.token);
        // 获取路径后面的token信息，如果没有则从cookie里面获取
        let token1 = this.token.token;
        if(token1 == undefined){
            token1 = this.token.token
        }else{
            this.$cookies.set('token',token1)
        }
        let response = await getUser(token1);
        console.log("index:",response)
        if(response.status == 2009){
            // 刷新token后将新的token保存到cookie中
            console.log("refreshToken",this.$cookies.get('refreshToken'));
            let newTokenResponse = await refreshToken(this.$cookies.get('refreshToken'));
            this.$cookies.set("token",newTokenResponse.data);
            response = await getUser(newTokenResponse.data);
        }
        if(response.status != 1){
            this.$router.push("/reviewLogin");
        }else{
            this.user = response;
        }
        this.selectAll();
    }
}
</script>

<style>

</style>